<!--  -->
<template>
  <div class="">
    <!--手动添题详情框-->
    <el-card class="cml-box" shadow="never" v-if="true">
      <div style="margin-bottom: 20px">
        <span class="tag">题型:</span>
        <el-radio-group v-model="cusmer.kind" @change="cumserTopicSelect">
          <el-radio label="0">单选</el-radio>
          <el-radio label="1">多选</el-radio>
          <el-radio label="2">判断</el-radio>
          <el-radio label="3">填空</el-radio>
          <el-radio label="4">综合</el-radio>
        </el-radio-group>
      </div>

      <div class="cml-box-1">
        <p class="tag">
          题干:（如需添加图片先点击上传图片，在点击图片图标，可设置图片大小）
        </p>

        <div @click="indexControll = -2">
          <div
            class="textarea"
            type="textarea"
            placeholder="题干信息"
            v-html="cusmer.topicSubject"
            v-if="!(indexControll == -2)"
          ></div>

          <tinymce
            v-else
            v-model="cusmer.topicSubject"
            :height="100"
            menubar=""
          ></tinymce>
        </div>
      </div>

      <div v-if="cusmer.kind == 0 || cusmer.kind == 1">
        <p class="tag">选项</p>

        <el-row
          v-for="(item, index) in cusmer.topicOption"
          class="cml-box"
          :key="index"
          style="margin-bottom: 20px"
        >
          <el-col :span="1"
            ><el-button
              :class="{ activeChoice: choiceAnswer[index] === true }"
              circle
              @click="choiceTopicAnswer(index)"
              title="设为答案"
              >{{ String.fromCharCode(65 + index) }}</el-button
            ></el-col
          >
          <el-col :span="22" :offset="1">
            <div @click="indexControll = index">
              <el-input
                class="textarea"
                type="textarea"
                :placeholder="'第' + (index + 1) + '空/选项'"
                v-html="cusmer.topicOption[index]"
                v-if="!(indexControll == index)"
              >
              </el-input>

              <tinymce
                v-else
                v-model="cusmer.topicOption[index]"
                :height="100"
                menubar=""
              ></tinymce>
            </div>
          </el-col>
        </el-row>
        <br />
        <el-col :span="6" :offset="2">
          <el-button type="info" size="mini" round @click="addOption()"
            >增加选项</el-button
          >
          <el-button type="info" size="mini" round @click="deleteOption()"
            >移除选项</el-button
          >
        </el-col>
      </div>

      <div v-if="cusmer.kind == 2">
        <el-row class="cml-box-1">
          <el-col :span="1"><span class="tag">答案:</span></el-col>
          <el-col :span="22" :offset="1">
            <el-radio-group v-model="cusmer.answer[0]">
              <el-radio label="1">对</el-radio>
              <el-radio label="0">错</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>

      <!-- <p class="tag">答案</p> -->
      <div v-if="cusmer.kind == 3 || cusmer.kind == 4">
        <p class="tag">答案:</p>
        <el-row
          class="cml-box"
          v-for="(item, index) in cusmer.answer"
          :key="index"
        >
          <!-- <span class="tag">答案:</span> -->
          <!-- <p class="tag">答案:</p> -->
          <el-col :span="22" :offset="2">
            <div @click="indexControll = index">
              <el-input
                class="textarea"
                type="textarea"
                placeholder="请输入内容"
                v-html="cusmer.answer[index]"
                v-if="!(indexControll == index)"
              >
              </el-input>

              <tinymce
                v-else
                v-model="cusmer.answer[index]"
                :height="100"
                menubar=""
              ></tinymce>
            </div>
          </el-col>
        </el-row>
        <br />
        <el-col :span="6" :offset="2" v-if="cusmer.kind == 3">
          <el-button type="info" size="mini" round @click="addOption()"
            >增加填空</el-button
          >
          <el-button type="info" size="mini" round @click="deleteOption()"
            >移除填空</el-button
          >
        </el-col>
      </div>

      <div class="cml-box-1" style="margin-bottom: 88px">
        <el-col :offset="11">
          <el-button
            type="primary"
            @click="addTopicAndDB()"
            :loading="isaddloading"
            >{{ buttonText.topicBtnText }}</el-button
          >
          <span class="tag"
            >请检查题目的完整性</span
          >
        </el-col>
      </div>
    </el-card>
    <!-- <div>
      <el-radio
        v-model="topicLable"
        v-for="(item, index) in topicType"
        :label="index"
        :key="index"
        >{{ item }}</el-radio
      >
    </div>
    <div>
      <div>
        <div class="cml-box-1">
          <p class="tag">
            题干:（如需添加图片先点击上传图片，在点击图片图标，可设置图片大小）
          </p>

          <div @click="indexControll = -2">
            <div
              class="textarea"
              type="textarea"
              placeholder="题干信息"
              v-html="cusmer.topicSubject"
              v-if="!(indexControll == -2)"
            ></div>
            <tinymce
              v-else
              v-model="cusmer.topicSubject"
              :height="100"
              menubar=""
            ></tinymce>
          </div>

          <div v-if="topicLable < 2">
            <el-checkbox-group
              v-model="cusmer.answer"
              :min="0"
              :max="topicLable == 0 ? 1 : 8"
            >
              <el-row v-for="(option, index) in chickOptions" :key="index">
                <el-checkbox :label="option">{{ option }}</el-checkbox>
              </el-row>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import Tinymce from "../../../../components/Tinymce/index.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Tinymce },
  data() {
    //这里存放数据
    return {
      topicType: ["单选题", "多选题", "判断题", "填空题", "综合题"],
      topicLable: 0,
      indexControll: -1,
      chickOptions: ["A", "B", "C", "D", "E", "F", "G", "H"],
      isaddloading: false,
      choiceAnswer: [false, false],
      buttonText: {
        taskBtnText: "立即创建",
        topicBtnText: "添加",
      },

      //手动添题的题目信息
      cusmer: {
        id: "",
        topicSubject: "",
        topicOption: ["", ""],
        answer: [],
        kind: "0",
        courseId: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //增加选项框
    addOption() {
      this.cusmer.topicOption.push("");
      this.choiceAnswer.push(false);
      this.cusmer.answer.push("");
      // this.cusmer.topicOption.splice(3);
    },
    deleteOption() {
      // this.cusmer.topicOption.pop();
      this.choiceAnswer.pop();
      this.cusmer.answer.pop();
      this.cusmer.topicOption.splice(this.cusmer.topicOption.length - 1, 1);
    },
    //初始化cusmer
    initcusmer(value) {
      var cusmerNew = {
        id: "",
        topicSubject: "",
        topicOption: ["", ""],
        answer: [""],
        kind: value,
        courseId: "",
      };
      this.cusmer = cusmerNew;
      // this.cusmer = Object.assign({}, cusmerNew);
      this.choiceAnswer = [false, false];
    },
    //手动添题题型选择
    cumserTopicSelect(value) {
      //将cusmer的key初始化为空
      this.initcusmer(value);
      // this.cusmer.topicOption=[];
    },
    //单选，多选答案配置
    choiceTopicAnswer(index) {
      //判断是单选还是多选
      //单选答案只能有一个
      if (this.cusmer.kind == 0) {
        if (this.choiceAnswer[index] == true) {
          this.$set(this.choiceAnswer, index, false);
        } else {
          for (var i = 0; i < this.choiceAnswer.length; i++) {
            this.$set(this.choiceAnswer, i, false);
          }
          this.$set(this.choiceAnswer, index, true);
        }
      }

      //多选答案可能有多个
      if (this.cusmer.kind == 1) {
        if (this.choiceAnswer[index] == true) {
          this.$set(this.choiceAnswer, index, false);
        } else {
          this.$set(this.choiceAnswer, index, true);
        }
      }
      //设置答案
      this.cusmer.answer = [];
      var j = 0;
      for (var i = 0; i < this.choiceAnswer.length; i++) {
        if (this.choiceAnswer[i] == true) {
          this.$set(this.cusmer.answer, j, String.fromCharCode(65 + i));
          j = j + 1;
        }
      }
      // this.$forceUpdate(); //强制刷新
    },

    //手动添题的添加按钮s
    addTopicAndDB() {
      if (this.chickCusmerTopic()) {
        this.isaddloading = true;
        this.$http({
          url: this.$http.adornUrl(`/edu-topic/addTopic`),
          method: "post",
          data: this.$http.adornData(
            {
              id: this.cusmer.id,
              topicSubject: this.cusmer.topicSubject,
              topicOptions: this.cusmer.topicOption,
              answers: this.cusmer.answer,
              kind: this.cusmer.kind,
              courseId: this.$route.query.courseid,
            },
            false
          ),
        }).then((data) => {
          if (data && data.data.code == 20000) {
            this.isaddloading = false;
          } else {
            this.$message.error("题目添加&修改失败");
          }
        });
      } else {
        // this.$message.error("题目信息不完整");
      }
    },

    //检查手动添题 题目完整性
    chickCusmerTopic() {
      if (!this.cusmer.topicSubject) {
        this.$message.error("未输入题干！");
        return false;
      }

      if (this.cusmer.kind == 0 || this.kind == 1) {
        if (!this.cusmer.topicOption[0] && !this.cusmer.topicOption[1]) {
          this.$message.error("未输选择题型！");
          return false;
        }
      }else{
        this,this.cusmer.topicOption=[];
      }

      if (!this.cusmer.answer[0]) {
        this.$message.error("未输设置答案！");
        return false;
      }

      return true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.cml-box {
  margin-top: 10px;
}
.cml-box-1 {
  margin-top: 40px;
}
.tag {
  color: #909399;
  padding: 0 10px;
  font-size: 15px;
  white-space: nowrap;
}
.textarea {
  width: 100%;
  border: #dcdfe6 1px solid;
  padding: 5px 5px 5px 5px;
  min-height: 50px;
}
.activeChoice {
  background-color: palegreen;
}
</style>